<template>
    <div>
        <a-drawer :title="formData.zh_CN" placement="right" width="600px" :visible="visible"
            :after-visible-change="afterVisibleChange" @close="onClose">
            <div>{{ $t('告警详情') }}</div>
            <div class="task-table" style="margin-top: 16px;" >
                <a-row class="border-top">
                    <a-col class="border-l title-bg text-right padding10 border-right" :span="6">{{ $t('告警对象') }}：</a-col>
                    <a-col class="border-right pl-10 padding10" :span="18">{{ formData.object_name }}</a-col>
                </a-row>
                <a-row class="border-top">
                    <a-col class="border-l title-bg text-right padding10 border-right" :span="6">{{ $t('告警等级') }}：</a-col>
                    <a-col class="border-right pl-10 padding10" :span="18">{{ formData.leval ? formData.leval : '-'}}</a-col>
                </a-row>
                <a-row class="border-top">
                    <a-col class="border-l title-bg text-right border-bottom padding10" :span="6">{{ $t('告警规则类型') }}：</a-col>
                    <a-col v-if="formData.rule_status =='0'" class="border-left border-bottom border-right pl-10 padding10" :span="18">
                        <span class="dot success"></span>
                        <span style="margin-left: 4px;">{{ $t('默认规则') }}</span>
                    </a-col>
                    <a-col v-else class="border-bottom border-right pl-10 padding10" :span="18">
                        <span class="dot"></span>
                        <span style="margin-left: 4px;">{{ $t('自定义规则') }}</span>
                    </a-col>
                </a-row>
            </div>

            <div style="margin-top: -48px;">{{ $t('告警规则') }}</div>
                <a-form-model :model='formData' ref="ruleForm">
                    <div class="task-table" style="margin-top: 16px;">
                    <a-row class="border-top">
                        <a-col class="border-l title-bg text-right padding6 border-right min-height46 max-height46" :span="6">
                            <a-checkbox :checked="!!(formData.report_enable)" @change="reportChange" size="small" style="margin-top: 6px;">
                                <span style="color: #006db8">{{ $t('提示') }}</span>
                            </a-checkbox>
                        </a-col>
                        <a-col class="border-right pl-10 min-height46 max-height46" :span="18">
                            <a-form-item  prop="report_values">
                                <div style="margin-top: 2px;">
                                    <span>{{ $t('阈值') }}：</span>
                                    <a-input v-model="formData.report_values" size="small" style="width: 198px;" addon-after="%" />
                                </div>
                            </a-form-item>
                        </a-col>
                    </a-row>

                    <a-row class="border-top">
                        <a-col class="border-l title-bg text-right padding6 border-right min-height46 max-height46" :span="6">
                            <a-checkbox :checked="!!(formData.warn_enable)" @change="warnChange" size="small" style="margin-top: 6px;">
                                <span style="color: #e59215">{{ $t('警告') }}</span>
                            </a-checkbox>
                        </a-col>
                        <a-col class="border-right pl-10 min-height46 max-height46" :span="18">
                            <a-form-item prop="warn_values">
                                <div style="margin-top: 2px;">
                                    <span>{{ $t('阈值') }}：</span>
                                    <a-input v-model="formData.warn_values" size="small" style="width: 198px;" addon-after="%" />
                                </div>
                            </a-form-item>
                        </a-col>
                        <!-- <a-col class="border-right pl-10 padding6 min-height46" :span="18">
                            <div style="display: flex">
                                <div style="margin-left: 12px;margin-top: 6px;">{{ $t('阈值') }}：</div>
                                <a-input v-model="formData.warn_values" style="width: 198px;" addon-after="%">
                                </a-input>
                            </div>
                        </a-col> -->
                    </a-row>

                    <a-row class="border-top border-bottom">
                        <a-col class="border-l title-bg text-right padding6 border-right min-height46 max-height46" :span="6">
                            <a-checkbox disabled :checked="!!(formData.critical_enable)" @change="criticalChange" size="small" style="margin-top: 6px;">
                                <span style="color: #b62832">{{ $t('严重') }}</span>
                            </a-checkbox>
                        </a-col>
                        <!-- <a-col class="border-right pl-10 padding6 min-height46" :span="18">
                            <div style="display: flex">
                                <div style="margin-left: 12px;margin-top: 6px;">{{ $t('阈值') }}：</div>
                                <a-input v-model="formData.critical_values" style="width: 198px;" addon-after="%">
                                </a-input>
                            </div>
                        </a-col> -->
                        <a-col class="border-right pl-10 min-height46 max-height46" :span="18">
                            <a-form-item prop="critical_values">
                                <div style="margin-top: 2px;">
                                    <span>{{ $t('阈值') }}：</span>
                                    <a-input v-model="formData.critical_values" disabled size="small" style="width: 198px;" addon-after="%" />
                                </div>
                            </a-form-item>
                        </a-col>
                    </a-row>

                    <!-- <div style="margin-top: 16px;">
                        <span>启用告警</span>
                        <a-switch v-model="checked" @change="onSwitch" />
                    </div> -->
                </div>
                </a-form-model>

            <div :style="{
                position: 'absolute',
                bottom: 0,
                width: '100%',
                borderTop: '1px solid #e8e8e8',
                padding: '10px 16px',
                textAlign: 'right',
                left: 0,
                background: '#fff',
                borderRadius: '0 0 4px 4px',
            }">
                <a-button style="position:absolute;left: 10px" @click="handleReset">
                    {{$t('恢复默认值')}}
                </a-button>
                <a-button style="margin-right: 8px" @click="onClose">
                    {{$t('Cancel')}}
                </a-button>
                <a-button type="primary" @click="handleSubmit">
                    {{$t('Sure')}}
                </a-button>
            </div>
        </a-drawer>
    </div>
</template>
<script>
export default {
    name: 'editRule',
    data() {
        return {
            visible: false,
            formData: {
                report_values: '',
                warn_values: '',
                critical_values: '',
                report_enable: false,
                warn_enable: false,
                critical_enable: false
            },
            checked: '',
            critical_enable: true,
            form:this.$form.createForm(this),
            formLayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 18 }
            },
        };
    },
    methods: {
        afterVisibleChange(val) {
            console.log('visible', val);
        },
        showDrawer() {
            this.visible = true;
        },
        onClose() {
            this.visible = false;
        },
        reportChange(e) {
            this.formData.report_enable = e.target.checked
        },
        warnChange(e) {
            this.formData.warn_enable = e.target.checked
        },
        criticalChange(e) {
            this.formData.critical_enable = e.target.checked
        },
        async handleSubmit() {
            this.$refs.ruleForm.validate(async (err,val)=>{
                const reg =  /^(0|[1-9][0-9]*)$/
                if (!reg.test(this.formData.report_values)) {
                    this.$message.error(this.$t('提示阈值只能输入零和非零开头的数字'))
                    return
                }
                if (!reg.test(this.formData.warn_values)) {
                    this.$message.error(this.$t('警告阈值只能输入零和非零开头的数字'))
                    return
                }
                if (this.formData.report_values < 1 || this.formData.report_values > 100) {
                    this.$message.error(this.$t('提示阈值配置区间在1-100'))
                    return
                }
                if (this.formData.warn_values < 1 || this.formData.warn_values > 100) {
                    this.$message.error(this.$t('警告阈值配置区间在1-100'))
                    return
                }
                    const params = {
                        id: this.formData.id,
                        status: Number(this.checked),
                        report_values: Number(this.formData.report_values),
                        warn_values: Number(this.formData.warn_values),
                        critical_values: Number(this.formData.critical_values),
                        report_enable: Number(this.formData.report_enable),
                        warn_enable	: Number(this.formData.warn_enable)	,
                        critical_enable: Number(this.formData.critical_enable),
                    }
                    // console.log(params)
                    const { data } = await this.$api.alarm.modifyAlertRule(params);
                    if(data.flag == 1) {
                        this.model(data.id) //返回模板
                        this.notice(data.id, data.params, data.flag) //通知列表显示
                        this.visible = false;
                    }else {
                        this.$emit('get-list')
                        this.$message.success(this.$t('修改成功'))
                    }
                    this.visible = false;
                    this.$refs.ruleForm.resetFields();
            })
        },
        handleReset() {
            this.$emit('handle-reset', this.formData.id)
        },
        onSwitch(checked) {
            console.log('checked', checked)
        },
        valid(rule, value, callback) {
            const reg =  /^(0|[1-9][0-9]*)$/
            if (!reg.test(value)) {
                callback(this.$t('只能输入零和非零开头的数字'))
            }
            if (value < 1 || value > 100) {
                callback(this.$t('配置区间在1-2'));
            } else {
                callback();
            }
        },
    },
};
</script>

<style scoped lang="less">
.task-table {
    min-height: 200px;

    .border-l {
        border-left: 1px solid #d9d9d9;
    }

    .border-b {
        border-bottom: 1px solid #d9d9d9;
    }

    .title-bg {
        background-color: #f2f2f2;
    }

    .text-right {
        text-align: right;
    }

    .border-left {
        border-left: 1px solid #d9d9d9;
    }

    .border-right {
        border-right: 1px solid #d9d9d9;
    }

    .border-bottom {
        border-bottom: 1px solid #d9d9d9;
    }

    .border-top {
        border-top: 1px solid #d9d9d9;
    }

    .pl-10 {
        padding-left: 10px;
    }

    .padding10 {
        padding: 8px;
    }

    .padding6 {
        padding: 6px;
    }

    .pr-10 {
        padding-right: 10px;
    }

    .min-height46 {
        min-height: 46px;
    }

    .max-height46 {
        max-height: 46px;
    }
}

.dot{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #999999;
}

.success {
    background-color: #129a9a;
}
</style>
